<template>
  <div class="about">
    <div class="about-content">
      <div class="profile">
        <div class="avatar-section">
          <img src="https://picsum.photos/200/200?random=14" alt="个人头像" class="avatar" />
          <h1>关于我</h1>
        </div>
        <div class="bio">
          <p>你好！我是一名热爱技术的开发者，专注于前端开发和用户体验设计。</p>
          <p>拥有多年的 Web 开发经验，擅长 Vue.js、React 等现代前端框架，对用户体验和界面设计有着浓厚的兴趣。</p>
        </div>
      </div>
      
      <div class="skills">
        <h2>技术栈</h2>
        <div class="skills-grid">
          <div class="skill-category">
            <h3>前端技术</h3>
            <ul>
              <li>Vue.js / React</li>
              <li>JavaScript / TypeScript</li>
              <li>HTML5 / CSS3</li>
              <li>Webpack / Vite</li>
            </ul>
          </div>
          <div class="skill-category">
            <h3>后端技术</h3>
            <ul>
              <li>Node.js</li>
              <li>Express / Koa</li>
              <li>MongoDB / MySQL</li>
              <li>RESTful API</li>
            </ul>
          </div>
          <div class="skill-category">
            <h3>工具 & 其他</h3>
            <ul>
              <li>Git / GitHub</li>
              <li>Docker</li>
              <li>Linux</li>
              <li>UI/UX 设计</li>
            </ul>
          </div>
        </div>
      </div>
      
      <div class="contact">
        <h2>联系我</h2>
        <div class="contact-info">
          <p>📧 邮箱: example@email.com</p>
          <p>🐱 GitHub: github.com/username</p>
          <p>💼 职业: 前端开发工程师</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.about {
  max-width: 800px;
  margin: 0 auto;
}

.about-content {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.profile {
  text-align: center;
  margin-bottom: 3rem;
}

.avatar-section {
  margin-bottom: 2rem;
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 5px solid #3498db;
}

.avatar-section h1 {
  color: #2c3e50;
  font-size: 2rem;
}

.bio p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.skills {
  margin-bottom: 3rem;
}

.skills h2 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 2rem;
  border-bottom: 2px solid #3498db;
  padding-bottom: 0.5rem;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.skill-category {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

.skill-category h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.skill-category ul {
  list-style: none;
  padding: 0;
}

.skill-category li {
  padding: 0.5rem 0;
  color: #555;
  border-bottom: 1px solid #e9ecef;
}

.skill-category li:last-child {
  border-bottom: none;
}

.contact {
  text-align: center;
}

.contact h2 {
  color: #2c3e50;
  margin-bottom: 2rem;
  border-bottom: 2px solid #3498db;
  padding-bottom: 0.5rem;
}

.contact-info {
  font-size: 1.1rem;
  line-height: 2;
  color: #555;
}

.contact-info p {
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .about-content {
    padding: 1rem;
  }
  
  .skills-grid {
    grid-template-columns: 1fr;
  }
  
  .avatar-section h1 {
    font-size: 1.5rem;
  }
  
  .bio p {
    font-size: 1rem;
  }
}
</style>